[JavaScript] How to draw gradient colors on canvas

In JavaScript, I'm trying to draw a gradient color effect on the canvas element. Let's take a closer look at how to do it below.




Drawing gradient effects on canvas using JavaScript
The title used an image implemented with canvas. Initially, I thought adding a gradient effect was as simple as adding a background color, but it didn't apply. Usually, we add color to the background like this.

The above code is a way to paint the context element with a red background. You can't use a gradient like the above. So if you enter it as below, an error occurs.

It would be convenient if canvas could be used like CSS. Anyway, so let's find out how. I'll explain step by step according to the following order.



1. Setting up the canvas
First and foremost, you need to create an HTML canvas element. Add a canvas element of size 640, 400 first.


2. Obtain canvas context, context
Next, using JavaScript, you need to access the 2D drawing context of the canvas.

Up to here, it's the same as the usual method of using the foreground color. From here, there's a difference.


3. Creating linear gradient
To create a gradient in canvas, you use the createLinearGradient method. This method creates a linear gradient. It also requires four arguments for the x and y coordinates of the gradient's start and end points.

ctx.createLinearGradient(x0, y0, x1, y1);

// x0, y0 : x and y coordinates of the gradient's starting point
// x1, y1 : x and y coordinates of the gradient's end point

[ Note ] Using these coordinates, you can determine the direction and position of the gradient. For instance, to create a vertical gradient, keep the x-coordinates of the start and end points the same. For a horizontal gradient, keep the y-coordinates the same. We'll cover how to change the direction further down!

So, using the above method, you can use the createLinearGradient() function as below.

Next, you need to add colors.

4. Adding color stops
You can define colors in the gradient object using the addColorStop() method. It also determines where they will appear within the gradient.

gradient.addColorStop(offset, color);

// offset : A value between 0 and 1 determining the position at the beginning or end
// color : Determines the gradient color to apply

Using the above function, you can first draw in red and finally apply blue as follows.


5. Filling the gradient and drawing a rectangle<br>Now, when you fill with the gradient created above and draw a rectangle, the entire process is completed.

Up to this point, we've implemented the gradient effect using the most basic example. Drawing a rectangle using the foreground color is a bit more complicated.

How to change the direction of the gradient
As mentioned above, if you want to change the direction of the gradient to horizontal? In this case, you need to adjust the arguments of the createLinearGradient method. While in CSS it was easy to use like 'to top', 'to left', it's a bit more difficult in comparison.

Simply put, by changing it as follows, you can create a gradient from left to right.

This is how we looked at the method of applying gradient colors to the canvas.


In conclusion
Personally, I use the canvas element quite a bit. There are many advantages to canvas, such as downloading image files, and as shown above, adding gradient effects with various colors and directions can also produce good results.